<template>
    <!-- 公共按钮 -->
    <div class="buttonContainer">
        <van-row class="loginBtnWarp">
            <van-button
                :disabled="disabledState"
                :loading="loadingState"
                :loading-text="loadingText"
                :type="type"
                :size="size"
                :round="round"
                class="van-col--22"
                @click="btnMethod"
            >{{btnMsg}}</van-button>
        </van-row>
    </div>
</template>

<script>
export default {
    props: ['btnMsg', 'loadingText', 'size', 'type', 'round'],
    data() {
        return {
            loadingState: false, // 登录状态
            disabledState: false // 禁用状态
        }
    },
    methods: {
        // 触发按钮事件
        async btnMethod() {
            // 进行验证
            await this.$emit('btnClick')
            // 加载动画开启，禁止用户反复点击
            this.loadingState = true
            this.disabledState = true
            setTimeout(() => {
                // 动画结束，解禁
                this.loadingState = false
                this.disabledState = false
            }, 2000)
            console.log('点击了一次按钮')
        }
    }
}
</script>

<style lang="stylus">
    // 公共按钮
    .buttonContainer
        .van-button
            margin 0.2rem 0
</style>
